<script setup lang="ts">
import { AlertCircle, Alert, Sunny } from "@vicons/ionicons5";
import tree, { Key, TreeOptions } from "@yk/components/tree";
import { reactive, ref, watch, DefineComponent } from "vue";
import { FormInstanceType } from "@yk/components/form";
import { UploadRawFile } from "@yk/components/upload/src/upload";
import { Random } from "mockjs";
import Item from "./Item.vue";
function createData(level: number = 4, parentkey = ""): any {
  if (!level) return [];

  let arr = new Array(4 - level).fill(0);
  return arr.map((_, index: number) => {
    let key = parentkey + level + index;
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key),
    };
  });
}
function createLabel(level: number) {
  if (level == 1) return "四级";
  if (level == 2) return "三级";
  if (level == 3) return "二级";
  if (level == 4) return "一级";
  return "";
}
const data = ref(createData());
console.log(data.value);

// 禁用节点
// const data = ref<TreeOptions[]>([
//   {
//     key: "0",
//     label: "0",
//     children: [
//       { key: "0-0", label: "0-0", disabled: true, indeterminate: true },
//       {
//         key: "0-1",
//         label: "0-1",
//         indeterminate: true,
//         children: [
//           { key: "0-1-0", label: "0-1-0" },
//           { key: "0-1-1", label: "0-1-1" },
//         ],
//       },
//       { key: "0-2", label: "0-2" },
//     ],
//   },
// ]);

// 异步加载数据案例
// function cetateLabel() {
//   return [
//     {
//       label: nextLabel(),
//       key: 1,
//       isLeaf: false, //这里isLeaf是false，表示点击时动态的加载子节点
//     },
//     {
//       label: nextLabel(),
//       key: 2,
//       isLeaf: false,
//     },
//   ];
// }
// function nextLabel(currentLabel?: string | number) {
//   if (!currentLabel) return "out of tao is born";
//   if (currentLabel == "out of tao is born") return "out of tao is born Two";
//   if (currentLabel == "out of tao is born Two")
//     return "out of tao is born Three";
//   if (currentLabel == "out of tao is born Three")
//     return "out of tao is born Four";
//   if (currentLabel == "out of tao is born Four") return "out of tao is born";
//   return "";
// }
// const data = ref(cetateLabel());
// function handleLoad(node: TreeOptions) {
//   return new Promise<TreeOptions[]>((resolve) => {
//     setTimeout(() => {
//       resolve([
//         {
//           label: nextLabel(node.label),
//           key: node.key + nextLabel(node.label),
//           isLeaf: false, //这里isLeaf是false，表示点击时动态的加载子节点
//         },
//       ]);
//     }, 1000);
//   });
// }
const value = ref<Key[]>(["40", "41"]);
const check = ref(false);
function handleClick(e: any) {
  console.log(e);
}
const name = ref("xxx");

const state = reactive({
  username: "",
  password: "",
});
const formRef = ref<FormInstanceType>();
const valiateForm = async () => {
  await formRef.value?.validate((valid, err) => {
    console.log(err, "验证通过=", valid);

    if (valid) {
      console.log("验证通过");
    } else {
      console.log("验证失败");
    }
  });
};
const handleBeforeUpload = (rawFile: UploadRawFile) => {
  return true;
};

const currentDay = ref(new Date());
// 虚拟列表--------------------------------------------
const totalCount = 2000;
interface DataType {
  id: number;
  name: string;
  desc: string;
  index: number;
}
const dataList: Array<DataType> = [];
let index = 0;
while (index++ != totalCount) {
  dataList.push({
    id: index,
    name: Random.name(),
    desc: Random.csentence(20, 120),
    index,
  });
}
const items = ref(dataList);
console.log(items.value, "items");
</script>

<template>
  <template v-if="false">
    <z-icon :color="'red'" :size="28">
      <AlertCircle></AlertCircle>
    </z-icon>
    <ZIcon :color="'green'" :size="28">
      <Alert></Alert>
    </ZIcon>
    <!-- <z-tree
    :data="data"
    label-field="label"
    key-field="key"
    children-field="children"
    :default-expand-keys="['40', '41']"
    v-model:select-keys="value"
    selectable
    multiple
  ></z-tree> -->
    <!-- 插槽传递-自定义label -->
    <z-tree
      :show-checkbox="true"
      :default-checked-keys="['4030', '41']"
      :data="data"
      v-model:select-keys="value"
      selectable
    >
      <template #default="{ node }">
        {{ node.key }}--{{ node.label }}
      </template>
    </z-tree>
    <!-- selectable 可以选中组件 multiple 支持多选 :on-load="handleLoad" 异步加载函数 -->
    <z-check-box v-model="check"> 单选 </z-check-box>
    <z-check-box :model-value="check">单选 </z-check-box>
    {{ check }}
    <z-button
      size="medium"
      type="primary"
      :round="false"
      :loading="false"
      iconPlacement="left"
      @click="handleClick"
    >
      <template #icon>
        <z-icon>
          <Sunny></Sunny>
        </z-icon>
      </template>
      sdfsdfsd
    </z-button>
    <br />
    {{ name }}
    <z-input
      v-model="name"
      placeholder="请输入"
      type="password"
      :showPassword="true"
      clearable
    >
      <template #prepend> word </template>
      <template #prependIcon>
        <z-icon :color="'red'" :size="16">
          <AlertCircle></AlertCircle>
        </z-icon>
      </template>
      <template #append>
        <div>gg</div>
      </template>
      <template #sufixIcon>
        <ZIcon :color="'green'" :size="28"> <Alert></Alert> </ZIcon
      ></template>
    </z-input>
    <z-form
      :model="state"
      :rules="{
        username: { required: true, message: '请输入用户名', trigger: 'blur' },
      }"
      ref="formRef"
    >
      <z-form-item
        prop="username"
        label="用户名"
        :rules="[
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <z-input v-model="state.username"></z-input>
      </z-form-item>
      <z-form-item
        prop="password"
        label="密码"
        :rules="[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <z-input v-model="state.password" type="password"></z-input>
      </z-form-item>
      <!-- <z-form-item style="margin-top: 20px"> -->
      <z-button style="margin-top: 20px" type="primary" @click="valiateForm"
        >提交</z-button
      >
      <!-- <z-button @click="onReset">重置</z-button> -->
      <!-- </z-form-item> -->
    </z-form>
    <div style="margin-top: 50px"></div>
    <z-upload :before-upload="handleBeforeUpload" drag>
      <z-button type="primary">点击上传</z-button>
      <!-- <template #tip>
      <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </template> -->
    </z-upload>
    <z-calendar v-model="currentDay">
      <template #date-cell="{ data }">
        {{ data.text }}
      </template>
    </z-calendar>
    {{ currentDay }}
  </template>
  <z-vitrtual-scroll-list
    class="virtual-list"
    :data-sources="items"
    data-key="id"
    :keeps="30"
    :estimate-size="80"
    :data-component="(Item as DefineComponent<{},{},any>) "
  >
    <template #default="{ data }">
      <div>
        <div>{{ data.name }}</div>
      </div>
    </template>
  </z-vitrtual-scroll-list>
</template>

<style scoped></style>
<!-- <template>
  <div class="main" v-lazy-container>
    <ImageList :imageList="imageList" />
  </div>
</template>
<script lang="ts" setup>
import ImageList from "./image-list.vue";
const imageList = [
  "https://ztalycdn.maihuominiapps.com/companyproject/zt-test/jpg/1645622109088_2f0118da.jpg",
  "https://ztalycdn.maihuominiapps.com/companyproject/zt-test/png/1645622102275_810f4909.png",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/png/1719906940389_2eaa3e15.png",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/jpeg/1719906944123_d5720048.jpeg",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/jpeg/1719906899138_0e017ebd.jpeg",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/jpeg/1719906949222_25142559.jpeg",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/png/1719906940389_2eaa3e15.png",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/jpeg/1719906944123_d5720048.jpeg",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/jpeg/1719906899138_0e017ebd.jpeg",
  "https://zmjcdn.fmkjfile.com/companyproject/zt-test/jpeg/1719906949222_25142559.jpeg",
].map((i, index) => {
  return {
    imageUrl: i,
    title: `第${index + 1}张图片`,
  };
});
</script>
<style scoped lang="scss">
.main {
  width: 800px;
  height: 800px;
  background-color: #18ca68;
  overflow-y: scroll;
}
</style> -->

<style lang="scss" scoped>
.virtual-list {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  border: 1px solid red;
}
</style>
